<template>
  <div class="post-detail">
    <el-card v-if="post" class="post-card">
      <template #header>
        <div class="post-header">
          <h2 class="post-title">{{ post.title }}</h2>
          <div class="post-meta">
            <span>作者: {{ post.author }}</span>
            <span>{{ formatDate(post.createTime) }}</span>
          </div>
        </div>
      </template>
      <div class="post-content">{{ post.content }}</div>
      <div class="post-actions">
        <el-button type="text" @click="handleLike" :class="{ 'liked': post.liked }">
          <el-icon><ThumbsUp /></el-icon> {{ post.likes || 0 }}
        </el-button>
      </div>
    </el-card>

    <div v-if="post" class="comments-section">
      <h3>评论 ({{ comments.length }})</h3>
      
      <div v-if="isLoggedIn" class="comment-form">
        <el-input
          v-model="newComment"
          type="textarea"
          :rows="3"
          placeholder="写下你的评论..."
        />
        <el-button 
          type="primary" 
          @click="handleAddComment"
          :loading="commenting"
          :disabled="!newComment.trim()"
        >
          发表评论
        </el-button>
      </div>
      
      <div v-else class="login-prompt">
        <el-link type="primary" @click="$router.push('/login')">登录</el-link> 后参与评论
      </div>

      <div class="comments-list">
        <el-card v-for="comment in comments" :key="comment.id" class="comment-card">
          <div class="comment-header">
            <span class="comment-author">{{ comment.author }}</span>
            <span class="comment-time">{{ formatDate(comment.createTime) }}</span>
          </div>
          <div class="comment-content">{{ comment.content }}</div>
        </el-card>

        <div v-if="comments.length === 0" class="no-comments">
          暂无评论
        </div>
      </div>
    </div>

    <div v-else class="loading">
      <el-skeleton :rows="3" animated />
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ThumbsUp } from '@element-plus/icons-vue'

export default {
  name: 'PostDetail',
  components: {
    ThumbsUp
  },
  data() {
    return {
      post: null,
      comments: [],
      newComment: '',
      isLoggedIn: false,
      commenting: false
    }
  },
  created() {
    this.checkLoginStatus()
    this.fetchPostDetail()
    this.fetchComments()
  },
  methods: {
    checkLoginStatus() {
      const token = localStorage.getItem('token')
      this.isLoggedIn = !!token
    },
    async fetchPostDetail() {
      try {
        const response = await axios.get(`/api/posts/${this.$route.params.id}`)
        this.post = response.data
      } catch (error) {
        ElMessage.error('获取帖子详情失败')
        this.$router.push('/')
      }
    },
    async fetchComments() {
      try {
        const response = await axios.get(`/api/posts/${this.$route.params.id}/comments`)
        this.comments = response.data
      } catch (error) {
        ElMessage.error('获取评论失败')
      }
    },
    formatDate(date) {
      return new Date(date).toLocaleString()
    },
    async handleLike() {
      if (!this.isLoggedIn) {
        this.$router.push('/login')
        return
      }
      try {
        await axios.post(`/api/posts/${this.post.id}/like`)
        this.post.liked = !this.post.liked
        this.post.likes = this.post.liked ? (this.post.likes || 0) + 1 : (this.post.likes || 1) - 1
      } catch (error) {
        ElMessage.error('操作失败')
      }
    },
    async handleAddComment() {
      if (!this.newComment.trim()) return
      
      try {
        this.commenting = true
        await axios.post(`/api/posts/${this.post.id}/comments`, {
          content: this.newComment
        })
        this.newComment = ''
        await this.fetchComments()
        ElMessage.success('评论成功')
      } catch (error) {
        ElMessage.error(error.response?.data?.message || '评论失败')
      } finally {
        this.commenting = false
      }
    }
  }
}
</script>

<style scoped>
.post-detail {
  max-width: 800px;
  margin: 0 auto;
}

.post-card {
  margin-bottom: 30px;
}

.post-header {
  margin-bottom: 20px;
}

.post-title {
  margin: 0 0 10px 0;
  color: #303133;
}

.post-meta {
  font-size: 14px;
  color: #909399;
}

.post-meta span {
  margin-right: 15px;
}

.post-content {
  font-size: 16px;
  line-height: 1.6;
  color: #606266;
  margin-bottom: 20px;
}

.post-actions {
  border-top: 1px solid #EBEEF5;
  padding-top: 15px;
}

.liked {
  color: #409EFF;
}

.comments-section {
  margin-top: 30px;
}

.comments-section h3 {
  margin-bottom: 20px;
  color: #303133;
}

.comment-form {
  margin-bottom: 30px;
}

.comment-form .el-button {
  margin-top: 10px;
}

.login-prompt {
  text-align: center;
  color: #909399;
  padding: 20px;
  background: #F5F7FA;
  border-radius: 4px;
  margin-bottom: 20px;
}

.comment-card {
  margin-bottom: 15px;
}

.comment-header {
  margin-bottom: 10px;
}

.comment-author {
  font-weight: bold;
  color: #303133;
}

.comment-time {
  margin-left: 10px;
  font-size: 12px;
  color: #909399;
}

.comment-content {
  color: #606266;
}

.no-comments {
  text-align: center;
  color: #909399;
  padding: 30px 0;
}

.loading {
  padding: 20px;
}
</style> 